<template>
  <div class="admin">
    <header>
      <div class="head">
        <span class="iconfont icon-saoma"> </span>
        <span class="iconfont icon-paihangbang"></span>
      </div>
      <div class="vip">
        <div class="vip-first">
          <strong>开通黑胶会员</strong>
          <el-button @click="toUser" class="vip-button" type="danger"
            >会员中心</el-button
          >
        </div>
        <div class="vip-two">
          <span>开通黑胶vip,立享12项专属特权</span>
        </div>
        <div class="vip-three">
          <strong>首次开通仅五元</strong>
        </div>
        <div class="vip-four">
          <span>立享现场音效，体验最high音乐氛围</span>
        </div>
      </div>
    </header>
    <main>
      <!-- 头像部分 -->
      <div class="headPhoto">
        <!-- 左边 -->
        <div class="left">
          <van-image
            class="tx"
            round
            @click="toLogin"
            width="4rem"
            height="4rem"
            :src="(userImg = '' ? mrtx : userImg)"
          />
          <span>{{ (userName = "" ? "未登录" : userName) }}</span>
        </div>
        <!-- 右边 -->
        <div class="right">
          <van-button
            :disabled="disabled"
            class="qiandao"
            type="danger"
            @click="signin()"
            >签到</van-button
          >
        </div>
      </div>
      <!-- 四个功能 -->
      <div class="grid">
        <van-grid :border="false">
          <van-grid-item icon="envelop-o" text="我的消息" />
          <van-grid-item icon="friends-o" text="我的好友" />
          <van-grid-item icon="wap-home-o" text="个人主页" />
          <van-grid-item icon="smile-o" text="个性装扮" />
        </van-grid>
      </div>
      <!-- 创作中心 -->
      <div class="ace">
        <!-- 左边 -->
        <div class="ace-left">
          <van-icon name="award-o" size="30px" />
          创作者中心
        </div>
        <!-- 右边 -->
        <div class="ace-right">
          <van-icon name="arrow" />
        </div>
      </div>
      <!-- 音乐服务 -->
      <div class="music-server">
        <p class="server-title">音乐服务</p>
        <div class="server-list">
          <van-cell class="iconfont icon-piao" title="演出" is-link />
          <van-cell class="iconfont icon-shouye" title="商城" is-link />
          <van-cell class="iconfont icon-lingdang" title="口袋彩铃" is-link />
          <van-cell
            class="iconfont icon-wulianwang-"
            title="在线听歌免流量"
            is-link
          />
        </div>
      </div>
      <!-- 小工具 -->
      <div class="little-tool">
        <p class="tool-title">小工具</p>
        <div class="tool-list">
          <van-cell class="iconfont icon-piao" title="演出" is-link />
          <van-cell class="iconfont icon-shouye" title="商城" is-link />
          <van-cell class="iconfont icon-lingdang" title="口袋彩铃" is-link />
          <van-cell
            class="iconfont icon-wulianwang-"
            title="在线听歌免流量"
            is-link
          />
        </div>
      </div>
      <van-cell class="iconfont icon-piao" title="演出" is-link />
      <van-cell class="iconfont icon-shouye" title="商城" is-link />
      <van-cell class="iconfont icon-lingdang cvn" title="口袋彩铃" is-link />
      <van-cell
        class="iconfont icon-wulianwang-"
        title="在线听歌免流量"
        is-link
      />
      <van-cell class="iconfont icon-shouye" title="分享网易云音乐" is-link />
      <van-cell class="iconfont icon-lingdang" title="关于" is-link />
      <el-button type="danger" @click="exit" class="tcdl" size="medium"
        >退出登录</el-button
      >
      <div class="meiyong"></div>
    </main>
  </div>
</template>

<script>
import { UserAPI, ExitAPI } from "../services/Admin";
export default {
  data() {
    return {
      mrtx: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic.51yuansu.com%2Fpic3%2Fcover%2F00%2F94%2F68%2F58dcd73302a43_610.jpg&refer=http%3A%2F%2Fpic.51yuansu.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1644031682&t=27ae5bd5b9abc4a7266b3b02175818b4",
      reg: false,
      regArr: [],
      userName: "",
      userImg: "",
      id: "",
      isQd: false,
      disabled: false,
      code: "",
    };
  },
  methods: {
    toLogin() {
      this.$router.push({
        name: "Login",
      });
    },

    signin() {
      this.isQd = true;
      this.disabled = true;
    },
    exit() {
      ExitAPI();
      this.$router.push({
        name: "Jump",
      });
      localStorage.removeItem("id");
      // console.log(ExitAPI().code);
    },
    toUser() {
      this.$router.push({
        name: "User",
      });
    },
  },
  async created() {
    if (localStorage.getItem("id") != null) {
      this.id = localStorage.getItem("id");
      this.id = localStorage.getItem("id");
      // console.log(localStorage.getItem("id"));
      const userDetail = await UserAPI(this.id);
      this.regUser = userDetail.profile;
      this.userName = this.regUser.nickname;
      this.userImg = this.regUser.avatarUrl;
    } else {
      this.userImg = this.mrtx;
      this.userName = "未登录";
    }
  },
};
</script>

<style scoped>
.tcdl {
  position: relative;
  left: 130px;
}
header {
  width: 100%;
  height: 200px;
  background-color: #787878;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-content: space-around;
  flex-wrap: wrap;
}
header span:nth-child(1) {
  display: inline-block;
  position: relative;
  right: 30px;
  top: 10px;
}
header span:nth-child(2) {
  display: inline-block;
  position: relative;
  left: 250px;
  top: 10px;
}
.vip-first {
  display: flex;
  justify-content: space-evenly;
}
.vip-first strong {
  display: inline;
  position: relative;
  top: 20px;
  color: #f8ddd8;
}
.vip-button {
  position: relative;
  top: 10px;
}
.vip-two span {
  color: #c2bfc0;
  font-size: 14px;
  display: inline;
  position: relative;
  left: 23px;
}
.vip-three strong {
  position: relative;
  left: 23px;
  top: 20px;
  color: #f8ddd8;
}
.vip-four span {
  color: #c2bfc0;
  font-size: 14px;
  position: relative;
  top: 20px !important;
  left: 23px;
}
main {
  width: 100%;
  height: auto;
  position: relative;
  bottom: 20px;
  background-color: white;
  border: 2px solid white;
  border-radius: 20px;
}
.tx {
  margin: 2px;
  position: relative;
  right: 20px;
}
.headPhoto {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  background-color: white;
  border-radius: 20px;
}
.left span {
  display: inline;
  position: relative;
  bottom: 25px;
  right: 16px;
}
.qiandao {
  border-radius: 20px;
  width: 80px;
  margin-top: 13px;
}
.ace {
  display: flex;
  background-color: white;
  border-top: #f2f2f2 solid 10px;
  border-bottom: #f2f2f2 solid 10px;
  justify-content: space-between;
  align-items: center;
}
.ace-left {
  line-height: 40px;
  margin-left: 10px;
}
.ace-right {
  margin-right: 30px;
}
.server-title {
  margin-left: 20px;
  line-height: 50px;
  border-bottom: #f8f8f8 solid 2px;
}
.music-server {
  border-bottom: #f2f2f2 solid 10px;
}
.tool-title {
  margin-left: 20px;
  line-height: 50px;
  border-bottom: #f8f8f8 solid 2px;
}
.little-tool {
  border-bottom: #f2f2f2 solid 10px;
}
.meiyong {
  width: 100%;
  height: 30px;
}
.cvn {
  border-bottom: #f2f2f2 solid 10px;
}
.vip {
  width: 70%;
  height: 75%;
  background-color: #888888;
  border-radius: 20px;
}
</style>
